<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue demo</title>
    <!--通过如下方式引入 Vue-->
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app-1">
        {{message}}
    </div>

    <div id="app-2">
        <span v-bind:title="msg">
            鼠标移动到上面停顿几秒后观察效果
        </span>
    </div>

    <div id="app-3">
        <p v-if="seen">现在你看到我了</p>
    </div>

    <div id="app-4">
        <ol>
            <!--v-for 指令可以绑定数组的数据来渲染一个项目列表-->
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
    </div>

    <div id="app-5">
        <p>
            {{message}}
        </p>
        <!--为了让用户和你的应用进行互动，我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法-->
        <button v-on:click="reverseMessage">逆转消息</button>
    </div>

    <div id="app-6">
        <p>{{msg}}</p>
        <!--v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定-->
        <input v-model="msg"/>
    </div>

    <div id="app-7">
        <ol>
            <!--
              现在我们为每个 todo-item 提供 todo 对象
              todo 对象是变量，即其内容可以是动态的。
              我们也需要为每个组件提供一个“key”，晚些时候我们会做个解释。
            -->
            <todo-item
                    v-for="item in groceryList"
                    v-bind:todo="item"
                    v-bind:key="item.id">
            </todo-item>
        </ol>
    </div>
</body>
<script type="text/javascript">
    var app1 = new Vue({
        el:'#app-1',
        data:{
            message:"Hello Vue！"
        }
    });

    var app2 = new Vue({
        el:'#app-2',
        data:{
            msg:"页面在"+new Date().toLocaleDateString()+"完成加载！"
        }
    });

    var app3 = new Vue({
        el:'#app-3',
        data:{
            seen:true
        }
    });

    var app4 = new Vue({
        el:'#app-4',
        data:{
            todos:[
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' }
            ]
        }
    });

    var app5 = new Vue({
        el:'#app-5',
        data:{
            message:'Hello Vue.js!'
        },
        methods:{
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    });

    var app6 = new Vue({
        el:'#app-6',
        data:{
            msg:'Hello Vue!'
        }
    });

    // 定义名为 todo-item 的新组件
    Vue.component('todo-item', {
        // todo-item 组件现在接受一个
        // "prop"，类似于一个自定义属性
        // 这个属性名为 todo。
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    });

    var app7 = new Vue({
        el:'#app-7',
        data:{
            groceryList: [
                { id: 0, text: '蔬菜' },
                { id: 1, text: '奶酪' },
                { id: 2, text: '随便其他什么人吃的东西' }
            ]
        }
    });
</script>
</html>